import './TempImageTextA01.scss'

import { useEffect, useState } from 'react'
import { ColorCallBack, assemblyDataA01, getNestedValue } from '../Utils'
import { LayoutDeftula } from '../Config/LayoutDeftula'

const testData = [
    { label: '加载...', value: 0, unit: '单' },
    { label: '加载...', value: 0, unit: '单' },
    { label: '加载...', value: 0, unit: '单' },
]

const TempImageTextA01 = ({ mode, config, apiData }) => {
    const [Data, setData] = useState(0)
    const [List, setList] = useState([])
    const configuration = config || LayoutDeftula.ImageTextA01

    const { list_apiName, list_dataLevel, list_dataType, list_data, listArr, describe, field, unit,
        flexContent, image_url, image_width, image_height, data_top, data_fill, data_fontSize, data_fontFamily, data_fontWeight, data_fontStyle,
        data_shadowX, data_shadowY, data_shadowB, data_shadowC, image_title, title_fill, title_fontSize, title_fontFamily, title_fontWeight, title_fontStyle,
        title_shadowX, title_shadowY, title_shadowB, title_shadowC, image_padding
    } = configuration

    const dataStyle = {
        paddingTop: data_top,
        color: data_fill,
        fontSize: data_fontSize,
        height: data_fontSize,
        lineHeight: data_fontSize + 'px',
        fontFamily: data_fontFamily,
        fontWeight: data_fontWeight,
        fontStyle: data_fontStyle,
        filter: `drop-shadow(${data_shadowX}px ${data_shadowY}px ${data_shadowB}px ${data_shadowC})`
    }

    const titleStyle = {
        color: title_fill,
        fontSize: title_fontSize,
        fontFamily: title_fontFamily,
        fontWeight: title_fontWeight,
        fontStyle: title_fontStyle,
        filter: `drop-shadow(${title_shadowX}px ${title_shadowY}px ${title_shadowB}px ${title_shadowC})`
    }


    useEffect(() => {
        if (apiData?.length !== 0 && list_apiName) {
            const [urlList] = apiData.filter(v => v.name === list_apiName)
            const data = getNestedValue(list_dataLevel, urlList)
            setData(data)
        } else setList(testData)

    }, [config, apiData])


    return (
        <div className='TempImageTextA01' style={{ flexDirection: flexContent ? 'column' : 'column-reverse' }}>
            <div className='ImageData' style={{ padding: image_padding }}>
                <div className='ImageData_image' style={{ width: image_width, height: image_height }}>
                    <div style={dataStyle}>{Data}</div>
                    <img src={image_url} alt="" />
                </div>
                {image_title && <div className='ImageData_title' style={titleStyle}>{image_title}</div>}
            </div>
        </div>
    );
};

export default TempImageTextA01;